<template>
    <div>
        <!-- 上有轮播图，下有九宫格 -->
        <mt-swipe :auto="4000" class="home_div">
            <mt-swipe-item v-for="(img,index) in imgs" :key="index">
              <img :src="img"/>
            </mt-swipe-item>
        </mt-swipe>

       <div class="grid">
         <my-ul>
           <my-li v-for="(grid,index) in grids" :key="index">
              <router-link :to="grid.router">
                <span :class="grid.className"></span>
                <div>{{grid.title}}</div>
              </router-link>
           </my-li>
         </my-ul>
       </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
          imgs: [ //轮播图数据
              require('@/assets/img/lunbo/1.jpg'),
              require('@/assets/img/lunbo/2.jpg'),
              require('@/assets/img/lunbo/3.jpg'),
              require('@/assets/img/lunbo/4.jpg'),
              require('@/assets/img/lunbo/5.jpg'),
              require('@/assets/img/lunbo/6.jpg'),
              require('@/assets/img/lunbo/7.jpg'),
              require('@/assets/img/lunbo/8.jpg')
          ],
          grids:[
              { className:'cms-news',title:'新闻资讯',router:{ name:'news.list'} },
              { className:'cms-photo',title:'图文分享',router:{ name:'photo.list',params:{categoryId:0} }/*categoryId：默认全部加载*/ },
              { className:'cms-goods',title:'商品展示',router:{ name:'goods.list',query:{id:1}} },
              { className:'cms-feedback',title:'留言反馈',router:{ name:'feedback.list'} },
              { className:'cms-search',title:'搜索资讯',router:{ name:'search.list'} },
              { className:'cms-contact',title:'联系我们',router:{ name:'contact.list'} }
          ]
        }
    },
    // created创建组件的生命周期函数中，可以操作数据
    created () {
        /* 访问api接口拿到包含图片url的json数据
        this.$axios.get('/rand?type=json')
        .then(res=>{
            // res.data.message = [{img:'图片地址'}]
            this.imgs = res.data.message;
            console.log(res.data.message);
        })
        .catch(err=> console.log('轮播图获取异常',err) );*/
    }
}
</script>
<style scoped >
  /*轮播图高度*/
	.mint-swipe {
		  height: 200px;
	}
  /*图片自适应*/
  .home_div {
    overflow: hidden;
    position: relative;
  }
  .home_div img{
      width: 100%;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      position: absolute;
  }

  a {
      color: black;
  }
  .grid span {
      display: inline-block;
      margin: 20px 40px;
      width: 50px;
      height: 46px;
      background-repeat: round;
  }
  .grid div {
    margin: -20px;
    background-repeat: round;
  }
  /*九宫格图片*/
  /*新闻资讯*/
  .cms-news {
    background-image: url('../../assets/img/sudoku/news.png');
  }
  /*图文分享*/
  .cms-photo {
    background-image: url('../../assets/img/sudoku/photo.png');
  }
  /*商品展示*/
  .cms-goods {
    background-image: url('../../assets/img/sudoku/goods.png');
  }
  /*留言反馈*/
  .cms-feedback {
    background-image: url('../../assets/img/sudoku/feedback.png');
  }
  /*搜索资讯*/
  .cms-search {
    background-image: url('../../assets/img/sudoku/search.png');
  }
  /*联系我们*/
  .cms-contact {
    background-image: url('../../assets/img/sudoku/contact.png');
  }
</style>
